<template>
  <el-container style="height: 100%">
    <el-header></el-header>
    <el-main>
      <el-row class="flex-center">
        <LoginForm 
          title="LOGIN IN"
          :formProps="formProps" 
          @confirm="login"
        ></LoginForm>
      </el-row>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import LoginForm from '@/components/Form'

export default {
  name: 'LoginPage',
  components: {
    LoginForm
  },
  data() {
    return {
      formProps: [
        {prop: 'username', label: '账户', required: true, type: 'input'},
        {prop: 'password', label: '密码', required: true, type: 'password'}
      ]
    }
  },
  methods: {
    login(data) {
      this.$api.api_user.login(data).then(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style scoped>
.flex-center {
  display: flex;
  justify-content: center;
}
</style>
